<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 300px;
				border: 2px solid red;
				height: 500px;
				float: left;
				margin-left: 100px;
			}
			.con{
				width: 280px;
				height:430px ;
				padding: 10px;
			}
			.input{
				height: 50px;
				background: rgba(0,0,0,0.2);
			}
			textarea{
				height: 50px;
				width: 245px;
				resize: none;
			}
			input{
				height: 50px;
				width: 52px;
				float: right;
			}
			.p1{
				text-align: right;
				padding-right: 20px;
				margin-bottom: 10px;
			}
			.p1 span{
				display: inline-block;
				padding: 10px;
				background: aqua;
				border-radius: 10px;
			}
			.p2{
				text-align: left;
				padding-right: 20px;
				margin-bottom: 10px;
			}
			.p2 span{
				display: inline-block;
				padding: 10px;
				background: pink;
				border-radius: 10px;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
//				抓取左侧输入框
				var txtL = document.getElementById('text')
//				抓取右侧的输入框
				var txtR = document.getElementById('text1')
//				抓取左侧的发送按钮
				var btnL = document.getElementById('btn')
//				抓 取右侧的发送按钮
				var btnR = document.getElementById('btn1')
//				抓取左侧大框
				var conL = document.getElementById('con1')
//				抓取右侧大框
				var conR = document.getElementById('con2')
			
//				给左侧按钮添加点击事件
				btnL.onclick = function(){
//					获取输入框里面的内容
					var cc = txtL.value;
					
					if(!cc){
						alert('请输入内容')
					}else{
	//					创建p标签
						var p = document.createElement('p')
	//					设置class属性
						p.setAttribute('class','p1');
	//					设置p标签里面的内容
						p.innerHTML = '<span>'+cc+'</span>';
	//					插入到内容块里面
						conL.appendChild(p)
	//					清理输入框中的内容
						txtL.value = '';
					
//						克隆一下p标签
						var pR = p.cloneNode(true)
//						设置新的class名
						pR.setAttribute('class','p2')
//						插入到右侧的大框内	
						conR.appendChild(pR)
					}

					
				}
			
			}
		</script>
		
		
		
	</head>
	<body>
		<div id="cc" class="box">
			<div class="con" id="con1">
				<!--<p class="p1">
					<span>贾老师真帅</span>
				</p>-->
			</div>
			<div class="input">
				<textarea id="text" name="" rows="" cols=""></textarea>
				<input type="button" name="btn" id="btn" value="发送" />
			</div>
		</div>
		
		
		<div id="dd" class="box">
			<div class="con" id="con2">
				<!--<p class="p2">
					<span>你说的对啊</span>
				</p>-->
				
			</div>
			<div class="input">
				<textarea id="text1" name="" rows="" cols=""></textarea>
				<input type="button" name="btn" id="btn1" value="发送" />
			</div>
		</div>
	</body>
</html>
